<!doctype html>
<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="utf-8">
  <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  <script src="wct-browser-config.js"></script>
  <script src="../../node_modules/wct-browser-legacy/browser.js"></script>
  <script type="module" src="./dynamic-imports/dynamic-element.js"></script>
</head>
<body>

<dynamic-element></dynamic-element>

<script type="module">
import './dynamic-imports/dynamic-element.js';
import { Base } from '../../polymer-legacy.js';

suite('dynamic imports', function() {

  test('use importHref to load and create an element', function(done) {
    var d = document.querySelector('dynamic-element');
    d.whenDynamicContentReady(function() {
      assert.isTrue(d.isAttached, true, 'dynamic element not readied');
      assert.ok(d.$.content, 'dynamic element does not have content');
      assert.isTrue(d.$.outer.isAttached, true, 'dynamic sub-element not readied');
      assert.ok(d.$.outer.$.content, 'dynamic sub-element does not have content');
      assert.isTrue(d.$.outer.$.inner.isAttached, true, 'dynamic sub-element not readied');
      assert.ok(d.$.outer.$.inner.$.content, 'dynamic sub-element does not have content');
      done();
    });
  });

  suite('async/sync loading', function() {

    var url = 'dynamic-imports/dynamic-element.html';

    test('importHref does not cache failed results', function(done) {
      Base.importHref('does_not_exist.html', function() {
        throw new Error('Load handler should not be called.');
      }, function() {
        var link = document.head
            .querySelector('[href="does_not_exist.html"]');
        assert.isNotOk(link, 'The link should not exist');
        done();
      });
    });

    test('importHref caches successful results', function(done) {
      var targetUrl = 'dynamic-imports/async-import.html';

      Base.importHref(targetUrl, function(event) {
        var targetOne = event.target;
        Base.importHref(targetUrl, function(event) {
          var targetTwo = event.target;

          assert.isOk(targetOne, 'Event target should be available');
          assert.strictEqual(targetOne, targetTwo,
              'Link element references should be identical');
          done();
        }, done);
      }, done);
    });

    test('importHref sync loads by default', function(done) {
      Base.importHref(url, function(e) {
        assert.isFalse(e.target.hasAttribute('async'),
                      'sync load is default');
        done();
      });
    });

    test('importHref sync called again, triggers load', function(done) {
      Base.importHref(url, function() {
        Base.importHref(url, function() {
          done();
        });
      });
    });

    test('importHref async loading', function(done) {
      Base.importHref('dynamic-imports/async-import.html', function(e) {
        assert.isTrue(window.asyncImportLoaded, 'flag not set from import');
        assert.isTrue(e.target.hasAttribute('async'), 'async load');
        assert.ok(e.target.import);
        done();
      }, null, true);
    });

    test('importHref does not leak event listeners on load', function(done) {
      var errorSpy = sinon.spy();
      var loadSpy = sinon.spy(function(e) {
        var target = e.target;
        target.dispatchEvent(new Event('error'));
        assert.isFalse(errorSpy.called, 'doesn\'t trigger the error event listener');
        setTimeout(function() {
          loadSpy.reset();
          target.dispatchEvent(new Event('load'));
          assert.isFalse(loadSpy.called, 'doesn\'t trigger the load event listener');
          done();
        });
      });

      Base.importHref('dynamic-imports/async-import.html', loadSpy, errorSpy, true);
    });

    test('importHref does not leak event listeners on error', function(done) {
      var loadSpy = sinon.spy();
      var errorSpy = sinon.spy(function(e) {
        var target = e.target;
        target.dispatchEvent(new Event('load'));
        assert.isFalse(loadSpy.called, 'doesn\'t trigger the load event listener');
        setTimeout(function() {
          errorSpy.reset();
          target.dispatchEvent(new Event('error'));
          assert.isFalse(errorSpy.called, 'doesn\'t trigger the error event listener');
          done();
        });
      });

      Base.importHref('dynamic-imports/async-import-invalid.html', loadSpy, errorSpy, true);
    });

  });

});
</script>
</body>
</html>
